<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="form" size="small">
        <el-form-item label="任务名称">
          <el-input v-model="form.taskName" clearable placeholder="请输入任务名称" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="巡检执行人">
          <el-input v-model="form.userName" clearable placeholder="请输入巡检执行人" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsStart"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsEnd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left: 10px">查 询</el-button>
        </el-form-item>
        <el-form-item class="createBtn">
          <el-button type="primary" @click="createTask" style="margin-left: 10px">创建临时任务</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="taskCode" label="任务编号" width="200"></el-table-column>
        <el-table-column prop="taskType" label="任务类型">
          <template slot-scope="scope">
            {{ getLabel(scope.row.taskType) }}
          </template>
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column prop="taskOperatorUserName" label="巡检执行人"></el-table-column>
        <el-table-column prop="startTime" label="计划开启巡检时间"></el-table-column>
        <el-table-column prop="completeTime" label="完成时间">
          <template slot-scope="scope">
            <span v-if="scope.row.taskCompleteState === 2">{{ scope.row.completeTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskState" label="巡检状态" :formatter="formatter" width="90"></el-table-column>
        <el-table-column
          prop="taskCompleteState"
          label="处理状态"
          :formatter="comFormatter"
          width="90"
        ></el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="currentPage"
        :total="totalPageNum"
        :page-size="pageSize"
      ></el-pagination>
    </el-card>
  </section>
</template>

<script>
import { getTask, deleteTaskInfo } from './js/patrol'
import { taskStatus, taskCompleteState, planTypeList } from './js/constants'
export default {
  name: 'TempTask',
  data () {
    return {
      repairUser: '',
      email: '',
      radio1: '',
      eventControl: '',
      dialogHandleVisible: false,
      currentPage: 1,
      totalPageNum: 0,
      pageSize: 10,
      form: {
        taskName: '',
        userName: '',
        startTime: '',
        endTime: ''
      },
      searchData: {
        taskName: '',
        userName: '',
        endTimeFrom: '',
        endTimeTo: ''
      },
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return time.getTime() > new Date(this.form.endTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime() - 86400000
          }
        }
      },
      rules: {
        staff: [{ required: true, message: '维修人不能为空', trigger: 'blur' }]
      },
      maintainer: [],
      tableData: []
    }
  },
  components: {},
  mounted () {
    this.getTempList(this.searchData)
  },
  methods: {
    formatter (row, column, cellValue) {
      return this.$base.constFormatter(taskStatus, cellValue)
    },
    comFormatter (row, column, cellValue) {
      return this.$base.constFormatter(taskCompleteState, cellValue)
    },
    dateChange () {},
    onSubmit () {
      this.currentPage = 1
      this.searchData = {
        taskName: this.form.taskName,
        userName: this.form.userName,
        endTimeFrom: this.form.startTime,
        endTimeTo: this.form.endTime
      }
      this.getTempList(this.searchData)
    },
    async getTempList (data) {
      let params = {
        ...data,
        isAuto: 0,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      let res = await getTask(params)
      this.totalPageNum = res.data.total
      res = res.data.list
      res.forEach(item => {
        item.taskState ? (item.taskState = 1) : (item.taskState = 0)
      })
      this.tableData = res
    },
    createTask () {
      this.$router.push({ path: 'CreateTemp' })
    },
    handleDetail (row) {
      row.routerFlag = 1
      this.$router.push({ path: 'InspectDetail', query: row })
    },
    closeHandle () {
      this.dialogHandleVisible = false
      this.$refs.handleFormRef.resetFields()
    },
    handleDelete (row) {
      let deleteArr = []
      deleteArr.push(row.taskCode)
      this.$confirm('是否确认删除该任务?', '审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let params = {
          taskCodeList: deleteArr
        }
        let res = await deleteTaskInfo(params)
        if (res.code === 0) {
          this.$message.success('删除成功！')
          if (this.tableData.length === 1 && this.currentPage > 1) {
            this.currentPage--
          }
        }
        this.getTempList(this.searchData)
      })
    },
    pageHandleChange (page) {
      this.currentPage = page
      this.getTempList(this.searchData)
    },
    getLabel (val) {
      return this.$base.constFormatter(planTypeList, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  .header-card {
    margin-bottom: 10px;
    .el-form {
      .el-form-item {
        .el-input {
          width: 160px;
        }
      }
    }
  }
  .el-pagination {
    text-align: center;
    display: block;
    margin: 10px auto;
  }
  .img-over {
    margin-right: 5px;
    width: 60px;
    height: 45px;
    cursor: pointer;
  }
}
</style>
